<script setup>
import {computed} from "vue";

const count = $ref(0)

const goodsCount = $ref(0) //购买数量
const goodsPrice = $ref(100) //商品价格

const computedCount = computed(() => {
  console.log('计算属性被调用'+new Date().getTime())
  return count //这里内部的值只要改变 计算属性会重新调用
})

const totalPrice = computed(() => {
  console.log('计算属性只有当内部使用的数据变化才会重新调用,反复调用多次不会计算')
  return goodsCount * goodsPrice //计算属性来计算总价:当购买数量改变 则结果自动重新计算
})

</script>

<template>
  <h4>计算属性:类似于方法 当内部的属性变化会重新计算</h4>
  count:{{count}}<br/>
  <input type="text" v-model="count"><br/>
  computedCount:{{computedCount}}<br/>
  <h4>计算属性综合应用</h4>
  商品数量:<input type="text" v-model="goodsCount"><br/>
  商品价格:<input type="text" v-model="goodsPrice"><br/>
  总价:{{totalPrice}}
  总价:{{totalPrice}}
  总价:{{totalPrice}}
  总价:{{totalPrice}}
</template>
